<template>
  <div class="app-container">
    <mainTilte title="添加配件" />
    <el-form
      ref="searchParams"
      :inline="true"
      :model="searchParams"
      label-width="110px"
    >
      <div class="filters-wrap clearfix">
        <div class="filters-area">
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-select v-model.trim="searchParams.type" clearable placeholder="编码">
                <el-option
                  v-for="(item, index) of issignContract"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="22" :sm="10" :md="10" :lg="6" :xl="5">
            <el-form-item label="">
              <el-input
                v-model.trim="searchParams.value"
                placeholder="关键字回车搜索"
              />
            </el-form-item>
          </el-col>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="query"
          >搜索</el-button>
        </div>
      </div>
    </el-form>
    <egrid
      v-loading="loading"
      class="egrid"
      stripe
      fit
      border
      highlight-current-row
      element-loading-text="正在努力加载中..."
      :column-type="['selection']"
      :data="tableData"
      :columns="columns"
      :columns-schema="columnsSchema"
      :columns-handler="columnsHandler"
      @selection-change="checkChildIds"
    />
    <epagination
      v-if="tableData"
      :total="total"
      :current="searchParams.page"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import thund from '@/components/base/thund'
import dicValues from '@/components/dicTransform/index'
import codeItem from '@/components/base/code'
import appText from '@/components/appText/index'
export default {
  mixins: [list],
  data() {
    const DICTIONARIES = {
      // 状态 2-禁用 1-启用
      isableList: [
        {
          code: 1,
          name: '启用'
        },
        {
          code: 2,
          name: '禁用'
        }
      ]
    }
    return {
      title: '',
      loadingText: '',
      loading: false,
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        type: '',
        value: '',
        category_id: ''
      },
      issignContract: [
        {
          name: '编码',
          code: 'code'
        },
        {
          name: '名称',
          code: 'name'
        },
        {
          name: '采购员',
          code: 'purchase_name'
        }
      ],
      value: '',
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '缩略图',
          prop: 'image_url',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '配件编码',
          prop: 'code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '配件名称',
          prop: 'name_ch',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '所属分类',
          prop: 'category_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '采购员',
          prop: 'purchase_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '状态',
          prop: 'is_status',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'creator_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'update_name',
          width: '200',
          align: 'center',
          tooltip: false,
          component: appText,
          propsHandler({ row }) {
            return { text: row.update_name }
          }
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      columnsSchema: {
        缩略图: {
          propsHandler({ col, row }) {
            return {
              img: row.image_url
            }
          },
          component: thund
        },
        状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['isableList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      }
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.query()
  },
  methods: {
    // 自定义操作栏
    columnsHandler(cols) {},
    checkChildIds(val) {
      this.$emit('checkedPartIds', val)
    },
    query() {
      this.initTableData(
        `/parts?page=${this.searchParams.page}&limit=${this.searchParams.limit}&${this.searchParams.type}=${this.searchParams.value}&category_id=${this.searchParams.category_id}&status=1&is_disabled=1`
      )
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    }
  }
}
</script>

<style>
</style>
